<template>
  <div class="news_page">
    <div class="news_header">
      <h2>{{ newsData.title }}</h2>
      <p>
        <span>作者：{{ newsData.source }}</span
        ><span>时间：{{ newsData.time }}</span>
      </p>
    </div>
    <div class="news_main">
        <h3 v-if="newsData.subheading!==''">{{newsData.subheading}}</h3>
        <p v-for="(ifem,i) in newsData.main" :key="i">{{ifem}}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      newsData: {},
    };
  },
  mounted(){
      this.getNewsData()
  },
  methods:{
      getNewsData() {
      var news_id = this.$route.query.newsID;
      axios
        .post(`http://localhost:3000/getNews`, { id: news_id })
        .then((ret) => {
            console.log(ret.data.newsData);
            ret.data.newsData.main=ret.data.newsData.main.split('//')
          this.newsData = ret.data.newsData;
        });
    },
  },
};
</script>

<style scoped>
.news_page{
    padding: 20px;
}
.news_header{
    border-bottom: 1px solid #DCDFE6;
}
.news_header h2{
    height: 50px;
    text-align: center;
    font:26px/50px '';
    font-weight: 700;
}
.news_header p {
    padding: 0 20px;
}
.news_header p span{
    color: #909399;
    padding: 0 20px;
}
.news_main{
    padding: 20px;
    color: #303133;
}
.news_main h3{
    height: 30px;
    text-align: center;
    font: 20px/30px ''
}
.news_main p{
    font: 18px/40px '';
    margin: 20px 0;
    text-indent: 2em;
}
</style>
